<template>
    <div class="NavBar" v-bind:class="{'blackcolor':pagindex==1||pagindex==2||pagindex==3||pagindex==4||pagindex==5||pagindex==7||pagindex==8}">
        <div class="leftLogo">
            <img v-if="pagindex==0" src="../assets/images/logo_white.png" />
            <img v-else-if="pagindex==6" src="../assets/images/logo_white.png" />
            <img v-else-if="pagindex==9" src="../assets/images/logo_white.png" />
            <img v-else src="../assets/images/logo_1.png" />
        </div>
        <div class="rightBar">
            <ul>
                <li @click="show(0)">
                    <p class="activeitem" v-if="pagindex==0||pagindex==1||pagindex==2||pagindex==3||pagindex==4||pagindex==5||pagindex==6"></p>

                    首页</li>
                <li @click="show(7)">
                    <p class="activeitem" v-if="pagindex==7"></p>
                    关于我们</li>
                <li @click="show(8)">
                    <p class="activeitem" v-if="pagindex==8"></p>
                    社会招聘</li>
                <li @click="show(9)">
                    <p class="activeitem" v-if="pagindex==9"></p>
                    合作交流</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'NavBar',
    data() {
        return {
            pagindex: 0
        }
    },
    methods: {
        show(index) {
            this.$emit('showpage', index)
        },
        ShowColor(index) {
            this.pagindex = index;
            console.log(index);
        }
    }
}
</script>

<style lang="scss" scoped>
.NavBar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 86px;
    // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 999;
    display: flex;
    align-items: center;

    .leftLogo {
        width: 358px;

        img {
            position: absolute;
            top: 24px;
            left: 60px;
        }
    }

    .rightBar {
        flex: 1;
        text-align: right;

        ul {
            display: flex;
            justify-content:flex-end;
            li {
                width: 160px;
                height: 24px;
                display: inline-block;
                cursor: pointer;
                text-align: center;
                font-size: 18px;
                font-weight: 400;
                color: #fff;
                position: relative;
                .activeitem {
                    display: inline-block;
                    width: 70px;
                    margin: 0 auto;
                    height: 4px;
                    background: #FFFFFF;
                    border-radius: 2px;
                    position: absolute;
                    bottom: -10px;
                    left: 46px;
                }
            }

        }

    }
}

.blackcolor {
    // border-bottom: 1px solid rgba(0, 0, 0, .2);

    li {
        color: #000 !important;
    }

    .activeitem {
        height: 4px;
        background: #000 !important;;
        border-radius: 2px;
    }
}
</style>
